<template>
    <div class="articleList-pages">
        <div class="articleList-page">
            <div class="wordbook-list">
                <van-list
                    v-model:loading="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="getListData"
                >
                    <van-cell
                        v-for="article in articleList"
                        :key="article.id"
                        class="wordbook-card"
                    >
                        <van-image
                            width="100"
                            height="100"
                            :src="article.img"
                            class="wordbook-cover"
                            fit="cover"
                        />
                        <!-- <img :src="book.img" alt="Word Book Cover" class="wordbook-cover" /> -->
                        <div class="wordbook-name">
                            <div class="">{{ article.title }}</div>
                            <div
                                style="color: blue; cursor: pointer"
                                @click="downloadPdfFromBase64(article.content)"
                            >
                                点击下载
                            </div>
                        </div>
                    </van-cell>
                </van-list>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, defineEmits } from "vue";
import { downloadPdfFromBase64 } from "@/utils/pdf";
import { getList } from "../api/article";
const emite = defineEmits(["clickChange"]);
const articleList = ref([]);
const loading = ref(false);
const finished = ref(false);

const reqs = ref({
    page: 1,
    limit: 10,
    params: {},
});
const getListData = async () => {
    const res = await getList({ ...reqs.value });
    console.log(res);
    if (res.success && res.data.length >= 1) {
        reqs.value.page++;
        loading.value = false;
        finished.value = false;
        articleList.value = res.data;
    } else {
        loading.value = true;
        finished.value = true;
    }
};

const testChange = (book) => {
    emite("clickChange", book.id);
};
</script>

<style scoped>
.articleList-page {
    padding: 10px;
}

.wordbook-list {
    margin-bottom: 16px;
}

.wordbook-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.wordbook-cover {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.wordbook-name {
    text-align: left;
    font-weight: bold;
    padding: 10px;
}

.card-actions {
    display: flex;
    justify-content: center;
    padding-bottom: 10px;
}

.add-wordbook-btn {
    margin: 0 auto;
    display: block;
    width: 90%;
}

.add-wordbook-form {
    padding: 16px;
}
</style>

<style>
.wordbook-list .van-cell__value {
    display: flex;
    align-items: flex-start !important;
}
</style>
